<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>订单支付</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/single/orderPay.css">
	<script text="text/javascript" src='public/js/jquery-3.1.1.min.js'></script>
</head>
<body>
	<!-- 酒店头部 -->
	<div class="header">
		<div class="header_left">
			<a class="left_arrow" href="#" onclick="javascript:history.go(-1);"></a>
		</div>
		<div class="header_title">订单支付</div>
	</div>

	<!-- 订单信息 -->
	<div class="info_wrap">
		<div class="order_info border_after">
			<div class="order_name">
				<p class="name_p">订单名称：<i class="name">08154545545</i></p>
				<p>支付金额：<i class="money">168</i></p>
			</div>
			<div class="order_details">
				<a href="orderGenerated.html">
				<p>订单详情</p>
				<div class="right_arrow"></div>
				</a>
			</div>
		</div>
	</div>

	<!-- 支付部分 -->
	<div class="pay_part border_before">
		<div class="need_pay border_after">
			<p>还需支付：</p>
			<span><i>138</i>元</span>
		</div>
		<div class="pay_mode pay_balance border_after">
			<p>我的余额<i class="rmb">¥ </i><i class="balance"> 50</i></p>
			<div class="select selected"></div>
		</div>
		<div class="pay_mode pay_card border_after">
			<div class="pay">
				<p class="pay_type">银行卡支付</p>
				<p class="pay_tips">支持信用卡储蓄卡</p>
			</div>
			<div class="select selected"></div>
		</div>
		<div class="pay_mode pay_wechat border_after">
			<div class="pay">
				<p class="pay_type">微信支付</p>
				<p class="pay_tips">推荐安装微信5.0及以上版本的使用</p>
			</div>
			<div class="select selected"></div>
		</div>
		<div class="pay_mode pay_alipay border_after">
			<div class="pay">
				<p class="pay_type">支付宝支付</p>
				<p class="pay_tips">推荐有支付宝帐号的用户使用</p>
			</div>
			<div class="select select_none"></div>
		</div>
	</div>

	<div class="sure_btn">
		<a href="">确认支付</a>
	</div>
	
	<!-- 弹出框 -->
	<div class="pop_up">
		<div class="content_wrap">
			<p class="success">恭喜您，下单成功！</p>
			<p class="tips">温馨提示：如需取消订单，请在18:00点之前，谢谢您的支持.</p>
		</div>
	</div>
	
	<script type="text/javascript">
	$(function(){
		$(".select").on('click',function(){
			if($(this).hasClass("selected")){
				$(this).removeClass("selected");
				$(this).addClass("select_none");
			}else{
				$(this).removeClass("select_none");
				$(this).addClass("selected");
			}
		})

		$(".sure_btn").on('click',function(){
			$(".pop_up").show(1).delay(1000).hide(1);
			setTimeout(function(){window.location="orderGenerated.html";},1000);
			return false;
		})
	})
	</script>

</body>

</html>